import { getInterViewDetails, getShieldList } from "@/services"
import React, { useEffect, useState } from "react"
import { Breadcrumb, Button } from 'antd';
import { NavLink } from "react-router-dom";

import './interviewRecord.less'
import stylesInterviewRecord from './interviewRecord.less'
import { IInterViewDetails } from "@/utils";
import { PlayCircleTwoTone } from "@ant-design/icons";

const interRecord: React.FC = (props: any) => {
    let [details, setDetails] = useState<IInterViewDetails>()

    useEffect(() => {
        getInterViewDetails(props.location.query.id).then(ok => {
            if (ok.code == 200) {
                setDetails(ok.data)
                console.log(ok.data)
            }
        })
    }, [])

    return <div className={stylesInterviewRecord.postSkill}>
        <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
            <Breadcrumb.Item>岗位</Breadcrumb.Item>
            <Breadcrumb.Item>面试记录管理</Breadcrumb.Item>
        </Breadcrumb>
        <div className={stylesInterviewRecord.interviewRecord}  style={details?.status == 1 ?{background:"#eee"}:{}}>
            <div>
                <b> 查看面试记录</b>
                <div className={stylesInterviewRecord.btn}>
                    <NavLink to='/teachers/interView/interviewManage'> <Button>返回</Button></NavLink>

                    <Button type="primary" onClick={() => {
                        getShieldList({ interviewId: details.interviewId, status: details.status }).then(ok => {
                            console.log(ok)
                        })
                    }}>{details?.status == 1 ? '解除屏蔽' : '屏蔽'}</Button>
                </div>
            </div>
            <div className={stylesInterviewRecord.detail}>
                <div>
                    <div><span>岗位名称</span>  <span>{details?.stationName}</span></div>
                    <div><span>公司名称</span>  <span>{details?.companyName}</span></div>
                </div>
                <div>
                    <div><span>面试时间</span>  <span>{details?.interviewTime}</span></div>
                    <div><span>公司名称</span>  <span>{details?.duration}</span></div>
                </div>
                <div>
                    <div><span>地点</span>  <span>{details?.site}</span></div>
                    <div><span>面试官</span>  <span>{details?.intervierManagement}</span></div>
                </div>
                <div>
                    <div><span>专业</span>  <span>{details?.majorName}</span></div>
                    <div><span>提交人</span>  <span>{details?.commitName}</span></div>
                </div>
            </div>
            <div className={stylesInterviewRecord.details}>
                <div>
                    <span>记录—吐槽</span>   <span>{details?.record}</span>
                </div>
                <div>
                    <span>录音文件</span>  <span className={stylesInterviewRecord.play}>
                        {details?.soundrecordList.length ? details?.soundrecordList.map(item => {
                            return <span key={item.soundId}>
                                <img src='http://111.203.59.61:8060/static/img/audio.ad85b5e9.svg' alt="" />
                                <span>{item.name}</span>
                                <Button type="primary" icon={<PlayCircleTwoTone />} onClick={(e) => { console.log(e.target.nextSibling) }}>
                                    播放
                                    <audio id="audio0" src={item.url} controls loop style={{ display: "none" }}></audio>
                                </Button>
                            </span>
                        }) : '无'}
                    </span>
                </div>
                <div>
                    <span>面试问题</span><span >请如实填写面试问题和答案，面试中没有作答的题目可略过答案填写，直接输入问题即可。</span>
                    {
                        details?.askAndanswerList.map(item => {
                            return <dl key={item.meeting}>
                                <dt><span className={stylesInterviewRecord.answer}>问</span>{item.question}</dt>
                                <dd>{item.answer ? <span><span className={stylesInterviewRecord.answers}>答</span>{item.answer}</span> : '该问题没有作答/不知道答案'}</dd>
                            </dl>
                        })
                    }
                </div>
            </div>
        <div className={stylesInterviewRecord.img}>
            {
                details?.status == 1 ? <img src='http://111.203.59.61:8060/static/img/shield.69691644.svg' alt="" /> : null
            }
        </div>
        </div>
    </div>
}
export default interRecord

